<template>
   <z-container>
          <z-header height="28px">button（按钮）</z-header>
          <z-main>
            <z-row :gutter="12">
              <z-col :span="3">大小</z-col>
              <z-col :span="2"><z-button size="large">主要按钮</z-button></z-col>
              <z-col :span="2"><z-button>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button size="mini">主要按钮</z-button></z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">可选类型</z-col>
              <z-col :span="2"><z-button>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="primary">主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="success">主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="warning">主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="danger">主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="info">主要按钮</z-button></z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">类型disabled</z-col>
              <z-col :span="2"><z-button disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="primary" disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="success" disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="warning" disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="danger" disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="info" disabled>主要按钮</z-button></z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">plain</z-col>
              <z-col :span="2"><z-button plain>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="primary" plain>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="success" plain>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="warning" plain>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="danger" plain>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="info" plain>主要按钮</z-button></z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">plain-disabled</z-col>
              <z-col :span="2"><z-button plain disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="primary" plain disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="success" plain disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="warning" plain disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="danger" plain disabled>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="info" plain disabled>主要按钮</z-button></z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">loading</z-col>
              <z-col :span="2"><z-button type="primary" loading>主要按钮</z-button></z-col>
              <z-col :span="2"><z-button type="primary" loading plain>主要按钮</z-button></z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">+ dropdown</z-col>
              <z-col :span="2">
                <z-dropdown>
                  <z-button type="primary">主要按钮<i class="z-icon-arrow-down z-icon--right"></i></z-button>
                  <z-dropdown-menu slot="dropdown">
                    <z-dropdown-item>黄金糕</z-dropdown-item>
                    <z-dropdown-item>狮子头</z-dropdown-item>
                    <z-dropdown-item>螺蛳粉</z-dropdown-item>
                    <z-dropdown-item>双皮奶</z-dropdown-item>
                    <z-dropdown-item>蚵仔煎</z-dropdown-item>
                  </z-dropdown-menu>
                </z-dropdown>
              </z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">icon button</z-col>
              <z-col :span="2"><z-button type="primary" circle icon="z-icon-message"></z-button></z-col>
              <z-col :span="2"><z-button type="primary" icon="z-icon-edit"></z-button></z-col>
              <z-col :span="4">
              <z-button-group>
                <z-button type="primary" icon="z-icon-arrow-left"></z-button>
                <z-button type="primary" icon="z-icon-arrow-right"></z-button>
              </z-button-group>
              </z-col>
             
            </z-row>
          </z-main>
        </z-container>
  
  
</template>
<script>
export default{
  name:'cButton'
}
</script>